<template>
  <section class="course-section">
    <header class="course-section__header">
      <h2>{{ title }}</h2>
      <p>{{ subtitle }}</p>
    </header>
    <div class="course-section__grid course-section__grid--categories">
      <article
        class="category-card"
        v-for="category in categories"
        :key="category.id"
        role="button"
        tabindex="0"
        @click="emit('category-select', category.id)"
        @keyup.enter="emit('category-select', category.id)"
        @keyup.space.prevent="emit('category-select', category.id)"
      >
        <div class="category-card__icon" :aria-label="category.name"></div>
        <h3>{{ category.name }}</h3>
        <p>{{ category.description }}</p>
      </article>
    </div>
  </section>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import type { CourseCategory } from '../../types/course/Course.ts'

defineOptions({
  name: 'CourseCategorySection',
})

const emit = defineEmits<{
  (e: 'category-select', categoryId: string): void
}>()

const props = defineProps<{
  title: string
  subtitle: string
  categories: CourseCategory[]
}>()

const { title, subtitle, categories } = toRefs(props)
</script>

<style scoped>
.course-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.course-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-section__header h2 {
  font-size: 28px;
  font-weight: 700;
}

.course-section__header p {
  font-size: 16px;
  color: #6b7280;
}

.course-section__grid {
  display: grid;
  gap: 24px;
}

.course-section__grid--categories {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.category-card {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  outline: none;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.category-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(60, 101, 245, 0.35);
}

.category-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #c3dafe, #e9d8fd);
}
</style>
